<template>
    <div class="my-holdings">
        <div class="title">My Holdings</div>
        <div class="total-box">
            <div class="left-box">
                <div class="k">Total Value</div>
                <div class="v">${{ totle_value.toFixed(2) }}</div>
            </div>
            <div class="right-box">
                <div class="k" :style="`color: ${ change_value >= 0 ? 'var(--positive-number-color)' : 'var(--negative-number-color)' }`">Today's Change</div>
                <div class="v" :style="`color: ${ change_value >= 0 ? 'var(--positive-number-color)' : 'var(--negative-number-color)' }`">+${{ change_value.toFixed(2) }} ({{ change_rate }}%)</div>
            </div>
        </div>
        <div class="stock-list">
            <div class="stock-item" v-for="item in holding_list" :key="item.id">
                <div class="left-box">
                    <div class="symbol-line">
                        <div class="symbol">{{ item.symbol }}</div>
                        <div class="name">{{ item.name }}</div>
                    </div>
                    <div class="price-line">
                        <div class="price">${{ item.price }}</div>
                        <div class="count-line">{{ item.shares }} shares</div>
                        <!-- <div class="change" :style="`color: ${ parseFloat(item.change) > 0 ? 'var(--positive-number-color)' : 'var(--negative-number-color)' }`">({{ item.change }})</div> -->
                    </div>
                    <!-- <div class="count-line">{{ item.shares }} shares</div> -->
                </div>
                <div class="right-box">
                    <div class="total-price">${{ (item.shares * parseFloat((search_symbol(item.symbol).price).slice(1))).toFixed(2) }}</div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
import { totle_value, change_value, change_rate } from '@/service/asset.js';
import { holding_list, assetService } from '@/service/asset.js';
import { stock_list } from '@/service/market';
import { onMounted } from 'vue';

function search_symbol(symbol) {
    for (let i = 0; i < stock_list.value.length; i++) {
        if (stock_list.value[i].shortName === symbol) {
            return stock_list.value[i];
        }
    }
}

onMounted(() => {
    // 获取持仓记录接口
    assetService.getStockOrderList();
});
</script>

<style scoped lang="less">
.my-holdings {
    box-sizing: border-box;
    width: 100%;
    padding: 3vw;
    border-radius: 3vw;
    background-color: #fff;
    box-shadow: 0 0 1.5vw rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: column;
    gap: 3vw;

    .title {
        font-size: 3.5vw;
        font-weight: 700;
        color: var(--text-color);
    }

    .total-box {
        display: flex;
        justify-content: space-between;
        padding: 3vw;
        background-color: var(--bg-color);

        .left-box, .right-box {
            flex: 1;
            display: flex;
            flex-direction: column;
            gap: 1vw;

            .k {
                font-size: 3vw;
                color: var(--text-light-color);
            }

            .v {
                font-size: 3.7vw;
                font-weight: 700;
            }
        }

        .right-box {
            text-align: right;
        }
    }

    .stock-list {
        display: flex;
        flex-direction: column;
        gap: 1vw;

        .stock-item {
            padding: 1.5vw;
            display: flex;
            justify-content: space-between;
            align-items: center;
            border-bottom: 0.1vw solid var(--border-color);

            &:last-child {
                border-bottom: none;
            }

            .left-box {
                display: flex;
                flex-direction: column;
                gap: 1vw;

                .symbol-line, .price-line {
                    display: flex;
                    align-items: center;
                    gap: 1vw;
                }

                .symbol-line {
                    .symbol {
                        font-size: 4vw;
                        font-weight: 600;
                        color: var(--text-color);
                    }

                    .name {
                        font-size: 3vw;
                        font-weight: 500;
                        color: var(--text-light-color);
                    }
                }

                .price-line {
                    .price {
                        font-size: 3.5vw;
                        color: var(--text-color);
                    }

                    .change {
                        font-size: 2.5vw;
                    }

                    .count-line {
                        font-size: 3vw;
                        color: var(--text-light-color);
                    }
                }

                // .count-line {
                //     font-size: 2.5vw;
                //     color: var(--text-light-color);
                // }
            }

            .right-box {
                .total-price {
                    font-size: 3.2vw;
                    font-weight: 700;
                    color: var(--text-color);
                }
            }
        }
    }
}
</style>